<template>
  <a-spin :loading="loading" style="width: 100%; height: 100%">
    <a-card
      class="general-card"
      :title="title"
      :header-style="{ paddingBottom: '12px' }"
      style="position: center"
    >
      <div class="content">
        <template> 总回答人数： </template>
        <a-statistic
          :value="count"
          :show-group-separator="true"
          :value-from="0"
          animation
        />
      </div>
      <div class="chart" style="height: 220px">
        <Chart
          style="height: 210px; margin-top: 10px; margin-bottom: 0"
          :option="chartOption"
        />
      </div>
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import {
    queryDataChainGrowth,
    DataChainGrowth,
    screenQueryDataChainGrowth,
  } from '@/api/visualization';
  import useChartOption from '@/hooks/chart-option';
  import questionDataSurveyStore from '../../../../store/modules/data-screen';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    quota: {
      type: String,
      default: '',
    },
    chartType: {
      type: String,
      default: '',
    },
    index: {
      type: Number,
      default: 0,
    },
    count: {
      type: Number,
      default: 0,
    },
  });
  const { loading, setLoading } = useLoading(true);
  // const count = ref(0);
  const growth = ref(100);
  const isUp = computed(() => growth.value > 50);
  const chartData = ref<any>([]);
  const chartXaxis = ref<any>([]);

  const question = questionDataSurveyStore();
  const questionData = ref(question.questions);

  function typeJudge(chartType: string) {
    if (chartType === 'line') {
      return {
        type: 'line',
        showSymbol: false,
        smooth: true,
        lineStyle: {
          color: '#4080FF',
        },
      };
    }
    if (chartType === 'bar') {
      return {
        type: 'bar',
        barWidth: 15,
        barGap: '0',
      };
    }
    return {
      type: 'pie',
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      label: {
        formatter: '{d}%',
        color: '#4E5969',
      },
    };
  }

  function axisShowJudge(chartType: string) {
    if (chartType === 'pie') {
      return {
        xAxis: {
          show: false,
        },
        tooltip: {
          trigger: 'item',
        },
      };
    }
    return {
      // legend: {
      //   left: 'center',
      //   data: chartXaxis.value,
      //   bottom: 0,
      //   icon: 'circle',
      //   itemWidth: 8,
      //   textStyle: {
      //     color: '#4E5969',
      //   },
      //   itemStyle: {
      //     borderWidth: 0,
      //   },
      // },

      xAxis: {
        type: 'category',
        show: true,
        data: chartXaxis.value,
        // data:["A","B","C","D"],
        axisLabel: {
          show: true,
          color: '#4E5969',
          rotate: 15,
          padding: [0, 0, 0, -120],
        },
        axisTick: {
          show: true,
          length: 2,
          lineStyle: {
            color: '#A9AEB8',
          },
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: '#A9AEB8',
          },
        },
      },

      tooltip: {
        show: true,
        trigger: 'axis',
        formatter: '{c}',
      },
    };
  }

  const { chartOption } = useChartOption(() => {
    return {
      grid: {
        left: '2.6%',
        right: '4',
        top: '10',
        bottom: '40',
      },
      ...axisShowJudge(props.chartType),

      yAxis: {
        show: false,
      },

      series: [
        {
          data: chartData.value,

          ...typeJudge(props.chartType),
        },
      ],
    };
  });

  const fetchData = async (params: DataChainGrowth) => {
    try {
      const dataNow = questionData.value[props.index];

      dataNow.choices.forEach((el, idx) => {
        if (props.chartType === 'bar') {
          chartData.value.push({
            value: el.value,
            itemStyle: {
              color: idx % 2 ? '#468DFF' : '#86DF6C',
            },
          });
        } else if (props.chartType === 'line') {
          chartData.value.push(el.value);
        } else {
          chartData.value.push({
            value: el.value,
            name: el.name,
          });
        }
      });

      dataNow.choices.forEach((el) => {
        chartXaxis.value.push(el.name);
      });
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  fetchData({ quota: props.quota });
</script>

<style scoped lang="less">
  .general-card {
    min-height: 204px;
  }

  .content {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
  }

  .percent-text {
    margin-left: 16px;
  }

  .chart {
    width: 100%;
    height: 80px;
    vertical-align: bottom;
  }

  .unit {
    padding-left: 8px;
    font-size: 12px;
  }

  .label {
    padding-right: 8px;
    font-size: 12px;
  }
</style>
